<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	<title th:text="${session.title}">123</title>
	<link th:replace="common/header"/>
	<link rel="stylesheet" th:href="@{/css/ace-skins.min.css}" />
	</head>
	<body class="navbar-fixed">
  	<div th:replace="common/top"></div>
		<div class="container-fluid main_bg" id="main-container">
			<a id="menu-toggler" href="#"><span></span></a>
			<div th:replace="common/menu"></div>
			<div id="main-content" class="clearfix">
				<div id="page-content" class="clearfix">
					<div th:replace="common/title"></div>
						<h3 class="header smaller lighter blue" th:utext="'<em class=icon-eye-open></em>' + ${session.footUser.nike} + '的碎片管理'">123</h3>
						<div th:if="${session.footUser.qx.text == '会员' || session.footUser.qx.text == 'VIP1' || session.footUser.qx.text == 'VIP2' || session.footUser.qx.text == 'VIP3'}">
							<div class="row-fluid" th:if="${null == footChip}">
							<!--PAGE CONTENT BEGINS HERE-->
								<div class="span12">
									<span th:text="'没有找到' + ${session.footUser.nike} + '的碎片信息'">123</span>
								</div>
							</div>
						<div th:if="${null != footChip}">
							<div class="row-fluid">
							<!--PAGE CONTENT BEGINS HERE-->
								<div class="span12">
									<div class="row-fluid">
									<!--PAGE CONTENT BEGINS HERE-->
										<div class="span1">
											<div class="control-group">
												<div class="controls">
													&nbsp;
												</div>
											</div>
										</div>
										<div class="span2">
											<div class="control-group">
												<div class="controls">
													<img th:src="@{/images/foot/white.png}" src="" alt=""/>
												</div>
												<div class="controls">
													<div class="row-fluid">
														<div class="span12">
															<div class="colockbox">
																<span id="whiteyear" style="display: none" th:text="${#dates.format(footLottery.lotteryDateWhite,'yyyy')}">123</span>
																<span id="whitemonth" style="display: none" th:text="${#dates.format(footLottery.lotteryDateWhite,'MM')}">123</span>
																<span id="whiteday" style="display: none" th:text="${#dates.format(footLottery.lotteryDateWhite,'dd')}">123</span>
																<span id="whitehour" style="display: none" th:text="${#dates.format(footLottery.lotteryDateWhite,'HH')}">123</span>
																<span id="whiteminute" style="display: none" th:text="${#dates.format(footLottery.lotteryDateWhite,'mm')}">123</span>
																<span id="whitesecond" style="display: none" th:text="${#dates.format(footLottery.lotteryDateWhite,'ss')}">123</span>
																<span class="hour" id="whiteh"></span>
																<span class="minute" id="whitem"></span>
																<span class="second" id="whites"></span>
															</div>
														</div>
													</div>
												</div>
												<div class="controls">
													<div class="row-fluid">
														<div class="span6" th:text="'白色碎片数量:' + ${footChip.haveWhile}">123</div>
														<div class="span6">
															<button class="btn-mini" type="button" onclick="getChipFalse(1);" id="whitebtn" style="display: none;"><em class="icon-arrow-left"></em>免费获取</button>
														</div>
													</div>
													<div class="row-fluid">
														<div class="span6">
															花费10PB直接获取
														</div>
														<div class="span6">
															<button class="btn-mini" type="button" onclick="getChipTrue(1);"><em class="icon-arrow-left"></em>直接获取</button>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="span2">
											<div class="control-group">
												<div class="controls">
													<img th:src="@{/images/foot/green.png}" src="" alt=""/>
												</div>
												<div class="controls">
													<div class="row-fluid">
														<div class="span12">
															<div class="colockbox">
																<span id="greenyear" style="display: none" th:text="${#dates.format(footLottery.lotteryDateGreen,'yyyy')}">123</span>
																<span id="greenmonth" style="display: none" th:text="${#dates.format(footLottery.lotteryDateGreen,'MM')}">123</span>
																<span id="greenday" style="display: none" th:text="${#dates.format(footLottery.lotteryDateGreen,'dd')}">123</span>
																<span id="greenhour" style="display: none" th:text="${#dates.format(footLottery.lotteryDateGreen,'HH')}">123</span>
																<span id="greenminute" style="display: none" th:text="${#dates.format(footLottery.lotteryDateGreen,'mm')}">123</span>
																<span id="greensecond" style="display: none" th:text="${#dates.format(footLottery.lotteryDateGreen,'ss')}">123</span>
																<span class="hour" id="greenh"></span>
																<span class="minute" id="greenm"></span>
																<span class="second" id="greens"></span>
															</div>
														</div>
													</div>
												</div>
												<div class="controls">
													<div class="row-fluid">
                                                        <div class="span6" th:text="'绿色碎片数量:' + ${footChip.haveGreen}">123</div>
														<div class="span6">
															<button class="btn-mini" type="button" onclick="getChipFalse(2);" id="greenbtn" style="display: none;"><em class="icon-arrow-left"></em>免费获取</button>
														</div>
													</div>
													<div class="row-fluid">
														<div class="span6">
															花费30PB直接获取
														</div>
														<div class="span6">
															<button class="btn-mini" type="button" onclick="getChipTrue(2);"><em class="icon-arrow-left"></em>直接获取</button>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="span2">
											<div class="control-group">
												<div class="controls">
													<img th:src="@{/images/foot/blue.png}" src="" alt=""/>
												</div>
												<div class="controls">
													<div class="row-fluid">
														<div class="span12">
															<div class="colockbox">
																<span id="blueyear" style="display: none" th:text="${#dates.format(footLottery.lotteryDateBlue,'yyyy')}">123</span>
																<span id="bluemonth" style="display: none" th:text="${#dates.format(footLottery.lotteryDateBlue,'MM')}">123</span>
																<span id="blueday" style="display: none" th:text="${#dates.format(footLottery.lotteryDateBlue,'dd')}">123</span>
																<span id="bluehour" style="display: none" th:text="${#dates.format(footLottery.lotteryDateBlue,'HH')}">123</span>
																<span id="blueminute" style="display: none" th:text="${#dates.format(footLottery.lotteryDateBlue,'mm')}">123</span>
																<span id="bluesecond" style="display: none" th:text="${#dates.format(footLottery.lotteryDateBlue,'ss')}">123</span>
																<span class="hour" id="blueh"></span>
																<span class="minute" id="bluem"></span>
																<span class="second" id="blues"></span>
															</div>
														</div>
													</div>
												</div>
												<div class="controls">
													<div class="row-fluid">
                                                        <div class="span6" th:text="'蓝色碎片数量:' + ${footChip.haveBlue}">123</div>
														<div class="span6">
															<button class="btn-mini" type="button" onclick="getChipFalse(3);" id="bluebtn" style="display: none;"><em class="icon-arrow-left"></em>免费获取</button>
														</div>
													</div>
													<div class="row-fluid">
														<div class="span6">
															花费50PB直接获取
														</div>
														<div class="span6">
															<button class="btn-mini" type="button" onclick="getChipTrue(3);"><em class="icon-arrow-left"></em>直接获取</button>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="span2">
											<div class="control-group">
												<div class="controls">
													<img th:src="@{/images/foot/purple.png}" src="" alt=""/>
												</div>
												<div class="controls">
													<div class="row-fluid">
														<div class="span12">
															<div class="colockbox">
																<span id="purpleyear" style="display: none" th:text="${#dates.format(footLottery.lotteryDatePurple,'yyyy')}">123</span>
																<span id="purplemonth" style="display: none" th:text="${#dates.format(footLottery.lotteryDatePurple,'MM')}">123</span>
																<span id="purpleday" style="display: none" th:text="${#dates.format(footLottery.lotteryDatePurple,'dd')}">123</span>
																<span id="purplehour" style="display: none" th:text="${#dates.format(footLottery.lotteryDatePurple,'HH')}">123</span>
																<span id="purpleminute" style="display: none" th:text="${#dates.format(footLottery.lotteryDatePurple,'mm')}">123</span>
																<span id="purplesecond" style="display: none" th:text="${#dates.format(footLottery.lotteryDatePurple,'ss')}">123</span>
																<span class="hour" id="purpleh"></span>
																<span class="minute" id="purplem"></span>
																<span class="second" id="purples"></span>
															</div>
														</div>
													</div>
												</div>
												<div class="controls">
													<div class="row-fluid">
                                                        <div class="span6" th:text="'紫色碎片数量:' + ${footChip.havePurple}">123</div>
														<div class="span6">
															<button class="btn-mini" type="button" onclick="getChipFalse(4);" id="purplebtn" style="display: none;"><em class="icon-arrow-left"></em>免费获取</button>
														</div>
													</div>
													<div class="row-fluid">
														<div class="span6">
															花费80PB直接获取
														</div>
														<div class="span6">
															<button class="btn-mini" type="button" onclick="getChipTrue(4);"><em class="icon-arrow-left"></em>直接获取</button>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="span2">
											<div class="control-group">
												<div class="controls">
													<img th:src="@{/images/foot/orange.png}" src="" alt=""/>
												</div>
												<div class="controls">
													<div class="row-fluid">
														<div class="span12">
															<div class="colockbox">
																<span id="orangeyear" style="display: none" th:text="${#dates.format(footLottery.lotteryDateOrange,'yyyy')}">123</span>
																<span id="orangemonth" style="display: none" th:text="${#dates.format(footLottery.lotteryDateOrange,'MM')}">123</span>
																<span id="orangeday" style="display: none" th:text="${#dates.format(footLottery.lotteryDateOrange,'dd')}">123</span>
																<span id="orangehour" style="display: none" th:text="${#dates.format(footLottery.lotteryDateOrange,'HH')}">123</span>
																<span id="orangeminute" style="display: none" th:text="${#dates.format(footLottery.lotteryDateOrange,'mm')}">123</span>
																<span id="orangesecond" style="display: none" th:text="${#dates.format(footLottery.lotteryDateOrange,'ss')}">123</span>
																<span class="hour" id="orangeh"></span>
																<span class="minute" id="orangem"></span>
																<span class="second" id="oranges"></span>
															</div>
														</div>
													</div>
												</div>
												<div class="controls">
													<div class="row-fluid">
                                                        <div class="span6" th:text="'橙色碎片数量:' + ${footChip.haveOrange}">123</div>
														<div class="span6">
															<button class="btn-mini" type="button" onclick="getChipFalse(5);" id="orangebtn" style="display: none;"><em class="icon-arrow-left"></em>免费获取</button>
														</div>
													</div>
													<div class="row-fluid">
														<div class="span6">
															花费100PB直接获取
														</div>
														<div class="span6">
															<button class="btn-mini" type="button" onclick="getChipTrue(5);"><em class="icon-arrow-left"></em>直接获取</button>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="span1">
											<div class="control-group">
												<div class="controls">
													&nbsp;
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="row-fluid">
								<div class="text-center span12">
									<a class="btn btn-warning" type="button" th:href="@{/hy/footChip/compose}"><em class="icon-arrow-left"></em>合成球员</a>
									<a class="btn" type="button" th:href="@{/index}"><em class="icon-arrow-left"></em>返回首页</a>
								</div>
							</div>
						</div>
					</div>
              		<!--/#page-content-->
				</div>
				<div th:replace="common/skin :: skin"></div>
		</div><!--/#main-content-->
	</div><!--/.fluid-container#main-container-->
	<div th:replace="common/js"></div>
	<script type="text/javascript" th:inline="javascript">
			function getChipTrue(type){
				$('#tipName').text('您确定要花费PB来抽取碎片吗？');
				$('#tipButton').click(function(){
					getChip(type, true);
				});
				showDialog('layer');
			}
			function getChipFalse(type){
				getChip(type, false);
			}
			function getChip(type, ispay){
				$.ajax({
					type: "POST",
					dataType: "text",
					url: "/hy/footChip/addChip",
					data: "id='[[${footChip.id}]]'&type=" + type + "&ispay=" + ispay,
					success: function(data){
						if(data === 'relogin'){
							window.location.href="/logout";
						}else if(data === 'ok'){
							window.location.reload(); 
						}else if(data === 'nomoney'){
							showTip('tip','小子！这里是有钱人来的地方',4000);
						}
					}
				});
			}
	
			$(document).ready(function() {
				countDown($("#whiteyear").text(), $("#whitemonth").text(), $("#whiteday").text(), $("#whitehour").text(), $("#whiteminute").text(), $("#whitesecond").text(), "#whiteh", "#whitem", "#whites", "#whitebtn");
				countDown($("#greenyear").text(), $("#greenmonth").text(), $("#greenday").text(), $("#greenhour").text(), $("#greenminute").text(), $("#greensecond").text(), "#greenh", "#greenm", "#greens", "#greenbtn");
				countDown($("#blueyear").text(), $("#bluemonth").text(), $("#blueday").text(), $("#bluehour").text(), $("#blueminute").text(), $("#bluesecond").text(), "#blueh", "#bluem", "#blues", "#bluebtn");
				countDown($("#purpleyear").text(), $("#purplemonth").text(), $("#purpleday").text(), $("#purplehour").text(), $("#purpleminute").text(), $("#purplesecond").text(), "#purpleh", "#purplem", "#purples", "#purplebtn");
				countDown($("#orangeyear").text(), $("#orangemonth").text(), $("#orangeday").text(), $("#orangehour").text(), $("#orangeminute").text(), $("#orangesecond").text(), "#orangeh", "#orangem", "#oranges", "#orangebtn");
				countDown($("#orangeyear").text(), $("#orangemonth").text(), $("#orangeday").text(), $("#orangehour").text(), $("#orangeminute").text(), $("#orangesecond").text(), "#orangeh", "#orangem", "#oranges", "#orangebtn");
			});
			
			//倒计时
			var timer = null;
			function countDown(year, month, day, hour, min, sec, hour_elem, minute_elem, second_elem, btn){
				var end_time = new Date(year, month-1, day, hour, min, sec);//月份是实际月份-1
				var sys_second = parseInt((end_time.getTime() - [[${time}]]) / 1000);
				timer = self.setInterval(function(){
					if (sys_second > 0) {
						sys_second = sys_second - 1;
						var hour = Math.floor((sys_second / 3600) % 24);
						var minute = Math.floor((sys_second / 60) % 60);
						var second = Math.floor(sys_second % 60);
						$(hour_elem).text(hour < 10 ? "0" + hour : hour);//计算小时
						$(minute_elem).text(minute < 10 ? "0" + minute : minute);//计算分
						$(second_elem).text(second < 10 ? "0" + second : second);// 计算秒
					} else { 
						$(hour_elem).text("00");//计算小时
						$(minute_elem).text("00");//计算分
						$(second_elem).text("00");// 计算秒
						$(btn).show();
						window.clearInterval(timer);
					}
				}, 1000);
			}
		</script>
        <script type="text/javascript">
            function keepsession(){
                var href = document.location.href;
                var url = href.substring(0, href.indexOf("html"))+"html?RandStr="+Math.random();
                document.location=url;
            }
            window.setTimeout("keepsession()",600000);//request the server per 10 mins.
        </script>
	</body>
</html>
